<template>
  <u-popup v-model="showPop" mode="bottom">
    <view class="hint" style="height: 80rpx">
      <u-checkbox-group>
        <u-checkbox v-model="checked" @change="showAlet = false" active-color="green"></u-checkbox>
      </u-checkbox-group>
      <text>同意</text>
      <text class="txt-xy" @tap.stop="toService">《服务协议》</text>
      与<text class="txt-xy" @tap.stop="toPrivacy">《隐私政策》</text>并授权登陆
    </view>
    <view class="to-login">
      <u-button class="cancel" @click="cancel" type="default">取消</u-button>
      <u-button class="submit" @click="onuseInfo" type="primary">立即登陆</u-button>
    </view>
    <view class="below">
      <text class="notice" v-show="showAlet" @tap.stop="toService">请先阅读同意协议再登陆！</text>
    </view>
  </u-popup>
</template>

<script>
import { loginFn } from 'api/login.js'
export default {
  name: 'Outher',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      showFlag: false,
      showAlet: false
    }
  },
  computed: {
    showPop: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    toService() {
      this.$u.route({
        url: '/pages/login/common',
        params: {
          name: 'service'
        }
      })
    },
    toPrivacy() {
      this.$u.route({
        url: '/pages/login/common',
        params: {
          name: 'privacy'
        }
      })
    },
    cancel() {
      this.showPop = false
      this.$emit('fail')
    },
    onuseInfo(e) {
      if (!this.checked) {
        this.showAlet = true
        return false
      }

      let that = this
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: obj => {
          wx.login({
            async success({ code, errMsg }) {
              if (code) {
                const datas = {
                  code,
                  nickName: obj.userInfo.nickName,
                  avatarUrl: obj.userInfo.avatarUrl
                }
                const { data } = await loginFn(datas)
                // 登录成功初始化token与用户信息
                that.$u.vuex('vuex_token', data.token)
                if (data.avatarUrl) {
                  obj.userInfo.avatarUrl = data.avatarUrl
                }
                obj.userInfo.nickName = data.nickName
                that.$u.vuex('vuex_user', obj.userInfo)
                console.log(obj.userInfo, '个人信息')
                that.$u.vuex('vuex_account', data.account)
                that.$emit('sucess')
                that.showPop = false
              } else {
                console.log('登录失败！' + res.errMsg)
                that.$emit('fail')
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style  lang='scss' scoped>
.hint {
  width: 100vw;
  font-size: 30rpx;
  display: flex !important;
  justify-content: center;
  margin-top: 50rpx;
  color: $u-tips-color;
  text-align: center;
}
.txt-xy {
  padding: 0 8rpx;
  color: #5e81f4;
  text-decoration: underline;
}
.to-login {
  height: 80rpx;
  padding: 20rpx;

  display: flex;

  .cancel {
    width: 45%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    border-radius: 20rpx;
  }
  .submit {
    width: 45%;
    border-radius: 20rpx;
  }
}
.below {
  margin-top: 50rpx;
  height: 100rpx;
  width: 100%;
  padding-left: 30%;
  // text-align: center;
}
.notice {
  color: red;
}
</style>
